<template>
    <div class="content" @contextmenu.prevent="contextMenu($event)">
        <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            highlight-current
            node-key="key"
            :show-checkbox="treeCheckbox"
            :default-expanded-keys="defaultExpandedKey"
            :filter-node-method="filterNode"
            ref="tree1"
            @check-change="handleCheckChange"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                    <i :class="data.icon"></i>
                    {{ node.label }}
                </span>
            </span>
        </el-tree>
        <vue-context-menu v-if="contextMenuData" :contextMenuData="contextMenuData" @diaReport="diaReport" />
        <down-report ref="downReport" />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import downReport from '@/components/downReport'
import { contextMenuData } from './config'
export default {
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'label',

                disabled: (node) => node.type != 's',
            },
            treeCheckbox: false,
            // 默认展开的节点
            defaultExpandedKey: [],
            filterText: '',
            contextMenuData: null,
            tree: null,
        }
    },
    computed: {
        ...mapState('backstage', ['sensorTreeData']),
    },
    components: {
        downReport,
    },
    props: {
        treeData: {
            type: Array,
            default: [],
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
        '$refs.tree1.checkedNodes': function (newVal, oldVal) {},
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true
            if (data.label.includes(value) && data.type == 's') {
                return true
            }
            return false // 展示所有未匹配到的节点
        },
        setTreeCheck(a) {
            this.treeCheckbox = a
        },
        handleNodeClick(e, node) {
            if (!this.treeCheckbox) this.$emit('sendData', e, node)
        },
        handleCheckChange(node, ischecked) {
            if (node.type == 's') {
                this.$emit('getCheckData', node, ischecked)
            } else if (node.type == 'd') {
                this.defaultExpandedKey.push(node.value)
            }
        },
        clearAllCheckedNodes() {},
        setCurrentKey(value) {
            this.$refs['tree1'].setCurrentKey(value)
        },
        pushKey(key) {
            this.defaultExpandedKey.push(key)
        },
        diaReport() {
            this.$refs.downReport.doOpen()
        },
        contextMenu(e) {
            let x = e.clientX
            let y = e.clientY
            this.contextMenuData.axis = { x, y }
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.tree = this.$refs['tree1']
        })
        this.contextMenuData = contextMenuData
        this.$EventBus.$on('setTreeCheck', (e) => {
            this.setTreeCheck(e)
        })
        this.$EventBus.$on('clearAllCheckedNodes', () => {
            this.clearAllCheckedNodes()
        })
    },
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .el-tree {
        width: 100%;
    }
}
</style>
